<template>
  <!-- 数据库配置模态框 -->
  <el-dialog
    :title="$t('projectDialog.title.dataConfig')"
    :visible.sync="dataDialogShow"
    width="40%"
    :before-close="closeDialog"
    @open="open"
  >
    <span class="main">
      <el-form
        :show-message="false"
        :rules="rules"
        ref="dataConfigRef"
        :model="row"
        label-position="right"
        label-width="110px"
      >
        <!-- 数据库名：db_name
            数据库用户名 db_user 
            数据库密码：db_password 
            数据库IP地址：db_ip 
            数据库端口：db_port -->
        <el-form-item :label="$t('projectDialog.form.db_name')" prop="db_name">
          <el-input v-model="row.db_name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('projectDialog.form.db_user')" prop="db_user">
          <el-input v-model="row.db_user"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('projectDialog.form.db_password')"
          prop="db_password"
        >
          <el-input v-model="row.db_password"></el-input>
        </el-form-item>
        <el-form-item :label="$t('projectDialog.form.db_ip')" prop="db_ip">
          <el-input v-model="row.db_ip"></el-input>
        </el-form-item>
        <el-form-item :label="$t('projectDialog.form.db_port')" prop="db_port">
          <el-input v-model="row.db_port"></el-input>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{
        $t("projectDialog.btn.cancel")
      }}</el-button>
      <!-- <el-button @click="resetForm" type="warning" plain>重 置</el-button> -->
      <el-button type="primary" @click="config" style="width: 200px">{{
        $t("projectDialog.btn.save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["dataDialogShow", "row"],
  data() {
    return {
      rules: {
        db_name: [{ required: true, message: "1", trigger: "blur" }],
        db_user: [{ required: true, message: "1", trigger: "blur" }],
        db_password: [{ required: true, message: "1", trigger: "blur" }],
        db_ip: [{ required: true, message: "1", trigger: "blur" }],
        db_port: [{ required: true, message: "1", trigger: "blur" }],
      },
    };
  },
  methods: {
    open() {
      console.log(this.row);
      this.row.id = this.row.id;
    },
    // 配置
    config() {
      console.log(this.row);
      let form = {
        id: this.row.id,
        db_name: this.row.db_name,
        db_user: this.row.db_user,
        db_password: this.row.db_password,
        db_ip: this.row.db_ip,
        db_port: parseInt(this.row.db_port),
      };
      this.$refs.dataConfigRef.validate((valid) => {
        if (valid) {
          this.$http.post("/git/config", form).then((res) => {
            if (res.data.code != 0)
              return this.$message.error(
                this.$t("projectDialog.message.error")
              );
            this.$message.success(this.$t("projectDialog.message.success"));
            this.closeDialog();
          });
        }
      });
    },
    resetForm() {
      console.log(1);
      this.$refs.dataConfigRef.resetFields();
    },
    // 关闭弹出框
    closeDialog(t) {
      this.$emit("closeDialog", t);
    },
  },
};
</script>

<style lang='less' scoped>
</style>